<script setup lang="ts">
  import { ref } from 'vue';
  import { createServicePlan } from '@/api-new2/service/service-plan';

  import One from './create-step/one.vue';
  import Two from './create-step/two.vue';
  import Three from './create-step/three.vue';

  const currentStep = ref(1);

  const nextEnable = ref(false);

  // 存储步骤数据
  const stepData = ref<any>({
    elderInfo: null,
    time: null,
    project: null,
  });

  const handleStepOneNext = (data: any) => {
    if (data) {
      nextEnable.value = true;
      stepData.value[data.key] = data.value;
    } else {
      nextEnable.value = false;
    }
  };

  const handlePrev = () => {
    if (currentStep.value > 0) {
      currentStep.value -= 1;
    }
  };

  const handleNext = () => {
    if (currentStep.value < 3) {
      currentStep.value += 1;
      nextEnable.value = false;
    } else {
      const { elderInfo, time, project } = stepData.value;

      const projectMap = new Map();

      (project as Map<string, any[]>).forEach((value, key) => {
        value.forEach((e) => {
          if (projectMap.get(e.id)) {
            projectMap.get(e.id).selectedMonths.push(key);
          } else {
            projectMap.set(e.id, {
              serviceId: e.id,
              selectedMonths: [key],
            });
          }
        });
      });

      createServicePlan({
        elderId: elderInfo.elderId,
        startDate: time.startDate,
        endDate: time.endDate,
        status: 1,
        serviceItems: [],
      });
    }
  };
</script>

<template>
  <div class="flex flex-col">
    <div class="self-center w-[700px]">
      <a-steps v-model:current="currentStep">
        <a-step>客户信息</a-step>
        <a-step>时间信息</a-step>
        <a-step>项目信息</a-step>
      </a-steps>
    </div>

    <!-- 第一步 -->
    <One v-if="currentStep === 1" @next="handleStepOneNext" />
    <Two
      v-if="currentStep === 2"
      :elder-id="stepData.elderInfo.elderId"
      @next="handleStepOneNext"
    />
    <Three
      v-if="currentStep === 3"
      :start-date="stepData.time.startTime"
      :end-date="stepData.time.endTime"
      @next="handleStepOneNext"
    />

    <a-divider></a-divider>
    <a-space class="self-end">
      <a-button
        v-if="currentStep > 0"
        type="primary"
        class="flex items-center"
        @click="handlePrev"
      >
        <icon-left />
        上一步
      </a-button>
      <a-button
        type="primary"
        :disabled="!nextEnable"
        class="flex items-center"
        @click="handleNext"
      >
        下一步
        <icon-right />
      </a-button>
    </a-space>
  </div>
</template>

<style lang="less" scoped></style>
